<script type="application/javascript" src="./dist/js/vue.min.js"></script>
<script type="application/javascript" src="./dist/js/axios.min.js"></script>
<script type="application/javascript" src="./dist/js/qs.min.js"></script>
<script type="application/javascript" src="./dist/js/jquery-1.8.3.min.js"></script>
<script>
    //vue
    var vu=new Vue({
        el:"#main",
        data:{
            ifGo:false,
            title:"",
            scount:1,
            img:"#",
            price:0.0,
            oldPrice:0.0,
            ifCache:0,
            page:1,
            shop:{},
            shops:[],
            selectedS:0
        },
        methods:{
            getList:function(){
                var vueObj=this;
                const url="/article/list";
                let datas = {params:{"page":this.page}};
                axios.get(url,datas).then(function(resp){
                    if(resp.data.status!=200){
                        alert(resp.data.msg);
                    }else{
                        vueObj.shops=resp.data.data;
                    }
                })
            },getSelectValue:function(){
                for(var i=0;i<this.shops.length;i++){
                    if(this.shops[i].id==this.selectedS){
                        this.shop=this.shops[i];
                        $("#imgGrop").show();
                        break;
                    }
                }
            }, submit:function () {
                this.checkValue();
                if(this.ifGo){
                    const url="/seckill";
                    let datas = {"articleId":this.shop.id,"title":this.shop.title,"img":this.shop.img,"price":this.price,"oldPrice":this.shop.price,"scount":this.scount};
                    axios.post(url,Qs.stringify(datas)).then(function(resp){
                        if(resp.data.status!=200){
                            alert(resp.data.msg);
                        }else{
                            alert("添加成功");
                            $(".content-wrapper").load("./segments/seckill/secKillList.html");
                        }
                    })/*.catch(resp => {
                      alert('请求失败');
                      this.changeValiCode();
                    });*/
                }

            },
            checkValue:function () {
                if(this.shop.title==""){
                    alert("秒杀名称不能为空");
                    this.ifGo=false;
                    return false;
                }
                if(this.price==""){
                    alert("秒杀价格不能为空");
                    this.ifGo=false;
                    return false;
                }
                this.ifGo=true;

            }
        },created:function () {
            this.getList();
           $("#imgGrop").hide();
        }
    }

    );
</script>
<!-- Content Header (Page header) -->
<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>新增秒杀</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="/">首页</a></li>
          <li class="breadcrumb-item active">新增秒杀</li>
        </ol>
      </div>
    </div>
  </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content" id="main">
  <div class="row">
    <div class="col-md-12">
      <div class="card card-primary">
        <div class="card-header">
          <!--<h3 class="card-title">General</h3>-->

          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
              <i class="fas fa-minus"></i></button>
          </div>
        </div>
        <div class="card-body">
          <div class="form-group">
            <label for="inputName">秒杀商品</label>
            <select class="custom-select" @change='getSelectValue' v-model="selectedS">
              <option v-for="shop in shops" :value="shop.id">{{shop.title}}</option>
            </select>
          </div>
          <div class="form-group" hidden>
            <label for="inputName">商品名称</label>
            <input type="text" id="inputName" class="form-control" v-model="shop.title">
          </div>
          <div class="form-group">
            <label for="inputName">商品原价</label>
            <input type="text"  class="form-control" v-model="shop.price" disabled>
          </div>
          <div class="form-group">
            <label for="inputName">秒杀价格</label>
            <input type="text"  class="form-control" v-model="price">
          </div>
          <div class="form-group">
            <label for="inputName">秒杀数量</label>
            <input type="text"  class="form-control" v-model="scount">
          </div>
          <!--<div class="form-group">
            <label for="inputStatus">Status</label>
            <select class="form-control custom-select">
              <option selected disabled>Select one</option>
              <option>On Hold</option>
              <option>Canceled</option>
              <option>Success</option>
            </select>
          </div>-->
          <div class="form-group" id="imgGrop">
            <input type="hidden"  class="form-control" v-model="img"/>
            <label>秒杀图片</label><br/>
            <img :src="shop.img" alt="秒杀图片" width="200px"/>
          </div>
        </div>
        <!-- /.card-body -->
      </div>
      <!-- /.card -->
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <a href="#" class="btn btn-secondary">Cancel</a>
      <input type="submit" value="提交" class="btn btn-success float-right" @click="submit"/>
    </div>
  </div>
</section>
<!-- /.content -->
